今天接著來整理Text、Image、Icon三種widget的一些屬性
| 屬性 | 功能 | 範例 |
|---|---|---|
| data | 要顯示的文字內容 | Text('Hello, Flutter!') |
| style | 可以設置字體大小、顏色、粗體、斜體 | style: TextStyle(fontSize: 20.0, color: Colors.blue,fontWeight: FontWeight.bold, fontStyle: FontStyle.italic) |
| textAlign | 對齊方式 | 靠右 textAlign: TextAlign.right(靠左left&置中center) |
| maxLines | 限制內容的最大行數，在 | maxLines: 2 |
| overflow | 文本溢出時的處理方式 | 使用省略號表示溢出：TextOverflow.ellipsis 溢出部分淡化：TextOverflow.fade 允許溢出部分可見：TextOverflow.visible |
| softWrap | 是否自動換行，默認為true | softWrap:false(不自動換行) |
| textDirection | 文字方向 | 從左到右，起始位置是文本左側：TextDirection.ltr(從右到左rtl) |
| textScaleFactor | 可以調整文字縮放比例 | textScaleFactor:1.5(初始字體大小20，調整過後變成20.0*1.5 = 30.0) |
程式碼：
實作結果：
| 屬性 | 功能 | 範例 |
|---|---|---|
| image | 顯示圖像的來源 | AssetImage：圖片來自內部的靜態圖像資源 ，像是實作中存在assets中的圖片；NetworkImage：從網路加載的圖片，要提供URL；FileImage：加載本地系統的圖片，要提供圖片路徑 |
| width 和 height | 調整圖片的寬度&高度，可使用像素或百分比設置 | width: 100.0,height: 100.0 |
| fit | 圖片的縮放方式 | fit:BoxFit.contain(圖片完整顯示，但可能不會填滿容器)/BoxFit.cover(圖片拉伸至填充容器，保持比例但可能會失去一部份圖片)/BoxFit.fill(默認值，圖片被拉伸填充容器，但會失去原本的比例) |
| alignment | 圖像的對齊方式 | alignment: Alignment.center |
| color 和 colorBlendMode | 圖像的顏色濾鏡 | 設置顏色：color: Colors.red 設置混和模式：colorBlendMode: BlendMode.multiply |
| repeat | 平鋪圖像，通常用在容器中創建圖像平鋪背景 | repeat: ImageRepeat.repeat |
| 屬性 | 功能 | 範例 |
|---|---|---|
| icon | 設置圖案 | 星星圖案：Icon(Icons.star) |
| color | 圖案顏色 | color: Colors.yellow |
| size | 圖案大小 | size: 48.0 |
iThome鐵人賽
看影片追技術